<template>
  <div class="playlist">
    <div class="header">
      <img src="./img/list1.jpg" alt="" />
      <ul>
        <li><a href="">发现音乐</a></li>
        <li><a href="">我的音乐</a></li>
        <input type="text" placeholder="音乐/视频/电台/用户" />
        <van-icon class="ss" name="search" />
      </ul>
    </div>
    <div class="tabb">
      <van-tabs v-model="active">
        <van-tab title="标签 1">推荐</van-tab>
        <van-tab title="标签 2">官方</van-tab>
        <van-tab title="标签 3">共享</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
      </van-tabs>
    </div>
    <div class="main">
      <div class="main_item">
        <img src="" alt="" />
        <p>叮!!!这里有份变身Boy</p>
        <p>by</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCatList } from "../../api/musList";
export default {
  data() {
    return {
      active: 2,
    };
  },
  computed: {},
  watch: {},

  methods: {
    async playlist1() {
      console.log(444);
      const result = await reqCatList();
      console.log(3);
      console.log(222, result);
    },
  },
  created() {
    this.playlist1();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 13.3vw;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.header {
  height: 3rem;
  background: #000000;
  font-size: 0.12rem;
}
.header img {
  width: 20%;
  height: 3rem;
  /* vertical-align: center; */
  line-height: 3rem;
  position: relative;
}
ul {
  width: 80%;
  height: 3rem;
  line-height: 3rem;
  display: flex;
  justify-content: space-around;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.12rem;
}
ul li a {
  color: #fff;
}
input {
  width: 5rem;
  height: 1rem;
  line-height: 0.5rem;
  margin-top: 0.8rem;
  border-radius: 0.5rem;
  border-bottom: none;
  border: none;
  position: relative;
}
.ss {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 5rem;
  top: 1rem;
}
</style>
